<template>
<div class="absolute-full q-pa-sm" style="margin-top:100px">

    <FullCalendar  class="fit" style="z-index:0;position:relative;border:1px solid grey;" ref="fullCalendar" :options="calendarOptions" />
    <!-- <q-inner-loading :showing="isLoading" class="bg-grey-10">
      <q-spinner-cube
      color="primary"
      size="50px"
      class="q-mb-sm"
    />
      数据加载中……
  </q-inner-loading> -->
</div>
</template>

<script>
import "@fullcalendar/core";
import {
    nanoid,
    customAlphabet
} from 'nanoid';
import moment from 'moment';
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import zhLocale from "@fullcalendar/core/locales/zh-cn";
import listPlugin from "@fullcalendar/list";
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
import {
    date
} from "quasar";
import {
    addPlanEvent,
    loadPlanList,
    updatePlanEvent,
    deletePlanEvent
} from "assets/api/studio/progress";
export default {
    name: 'ProgressPlan',
    components: {

        FullCalendar: () => import("@fullcalendar/vue"), // make the <FullCalendar> tag available

    },
    props: {
        projectinfo: {
            type: Object,
        },
        user: {
            type: Object
        }

    },
    data() {
        return {
            pid: '',
            isLoading:true,
            viewTitle: '',
            viewType: 'week-scheduler',
            clickable: false,
            calendarOptions: {
                schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
                plugins: [resourceTimelinePlugin, dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
                contentHeight: '100%-50px',
                initialView: "resourceTimelineMonth",
                headerToolbar: false,
                locale: zhLocale,
                selectable: false,
                droppable: false,
                editable: false,
                longPressDelay: 800,
                resourceAreaHeaderContent: '事件',
                resources: [{
                        "id": 10,
                        "title": "项目开始",
                        "eventClassNames": 'teal-6'
                    }, {
                        "id": 20,
                        "title": "前期策划",
                        "color": 'blue',
                        "children": [{
                                "id": 21,
                                "title": '搜集资料'
                            },
                            {
                                "id": 22,
                                "title": '撰写文案'
                            },
                            {
                                id: 23,
                                title: '审阅文案'
                            },
                            {
                                id: 24,
                                title: '撰写脚本'
                            },
                            {
                                id: 25,
                                title: '确认脚本'
                            },
                        ]
                    },
                    {
                        "id": 30,
                        "title": "拍摄",
                        "color": 'blue-6',
                        "children": [{
                                "id": 31,
                                "title": '制定计划'
                            },
                            {
                                "id": 32,
                                "title": '拍摄前准备'
                            },
                            {
                                "id": 33,
                                "title": '执行拍摄'
                            },
                            {
                                id: 34,
                                title: '补拍'
                            },

                        ]
                    }, {
                        "id": 40,
                        "title": "后期",
                        "color": 'blue-6',
                        "children": [{
                                "id": 41,
                                "title": '确认配音'
                            },
                            {
                                "id": 42,
                                "title": '整理素材'
                            },
                            {
                                id: 43,
                                title: '初剪'
                            },
                            {
                                id: 44,
                                title: '精修'
                            },
                            {
                                id: 45,
                                title: '调色'
                            },
                            {
                                id: 46,
                                title: '包装'
                            },
                        ]
                    },
                    {
                        "id": 50,
                        "title": "审阅与交付",
                        "color": 'blue-6',
                        "children": [{
                                "id": 51,
                                "title": '交付初稿'
                            },
                            {
                                "id": 52,
                                "title": '审阅成品'
                            },
                            {
                                id: 53,
                                title: '交付成片'
                            },

                        ]

                    },
                    {
                        "id": 60,
                        "title": "项目结束",
                        "color": 'blue-6',

                    }
                ],
                events: [],

                select: this.handleSelect,
                views: {},
                nowIndicator: true,
                eventDurationEditable: true,
                viewDidMount: this.handleViewMount,
                eventDidMount: this.handleDidMount,
                eventDrop: this.handleEventDrop,
                eventResize: this.handleResize,

                eventClick: this.handleClick
            },

        }
    },
    created() {
        this.pid = this.$route.params.pid;
    },
    mounted() {
        setTimeout(() => {
            this.addProjectEvent();
            this.handleRight();
            this.handleLoadPlanList();
        }, 500)

    },
    methods: {
        handleRight() {
            //console.log('user', this.user);
            if (this.user.right > 4) {

            }
        },
        handleEdit(isEdit) {
            if (isEdit) {
                this.calendarOptions.selectable = true;
                this.calendarOptions.droppable = true;
                this.calendarOptions.editable = true;
                this.clickable = true;
            } else {
                this.calendarOptions.selectable = false;
                this.calendarOptions.droppable = false;
                this.calendarOptions.editable = false;
                this.clickable = false;
            }

        },
        addProjectEvent() {
            let calendarApi = this.$refs.fullCalendar.getApi();
            //console.log(this.projectinfo.stime, this.projectinfo.etime);
            let stime = moment(this.projectinfo.stime, 'YYYY/MM/DD').format('YYYY-MM-DD')
            let etime = moment(this.projectinfo.etime, 'YYYY/MM/DD').format('YYYY-MM-DD')
            let event = {
                id: 11,
                title: '项目开始',
                start: stime,
                resourceId: 10,
                classNames: 'bg-teal-6'
            };
            let endEvent = {
                id: 61,
                title: '项目结束',
                start: etime,
                resourceId: 60,
                classNames: 'bg-teal-6'
            }

            calendarApi.addEvent(event);
            calendarApi.addEvent(endEvent);
        },
        handleViewTitle() {
            let calendarApi = this.$refs.fullCalendar.getApi()
            let view = calendarApi.view;
            this.viewTitle = view.title;
            this.$emit('update', view.title)
        },
        handleScrolltoToday() {
            let now = Date.now();
            let calendarApi = this.$refs.fullCalendar.getApi();
            let val = calendarApi.view.type;
            //console.log(val);
            if (val == "resourceTimelineWeek") {
                var duration = date.formatDate(now, 'E');
                let hour = parseInt(date.formatDate(now, 'HH'));
                if (hour == 0) {
                    var newhour = 0
                } else {
                    var newhour = hour - 1
                }
                //console.log(now);
                calendarApi.scrollToTime({
                    days: duration - 1,
                    milliseconds: newhour * 60 * 60 * 1000,
                })
            }
            if (val == "resourceTimelineMonth") {
                var duration = date.formatDate(now, 'D')
                calendarApi.scrollToTime({
                    days: duration - 1

                })
            }
            if (val == "resourceTimelineDay") {
                var duration = now;
                calendarApi.scrollToTime(duration)
            }

        },
        handleToday() {
            let calendarApi = this.$refs.fullCalendar.getApi();
            calendarApi.today();
            this.handleScrolltoToday()
            this.handleViewTitle();
        },
        handlePrev() {
            let calendarApi = this.$refs.fullCalendar.getApi();
            calendarApi.prev();
            this.handleViewTitle();
        },
        handleNext() {
            let calendarApi = this.$refs.fullCalendar.getApi();
            calendarApi.next();
            this.handleViewTitle();
        },
        handleViewMount(arg) {
            //console.log('view load');
            this.viewTitle = arg.view.title;
            this.$emit('update', arg.view.title)
            this.handleScrolltoToday();
            this.handleLoadPlanList()

        },
        handleViewType(val) {
            let calendarApi = this.$refs.fullCalendar.getApi();
            calendarApi.changeView(val);
            this.handleViewTitle();
            this.handleScrolltoToday();
        },
        handleSelect(ob) {
            let calendarApi = this.$refs.fullCalendar.getApi();
            //console.log(ob);

            let e_id = customAlphabet('0123456789', 8);
            //console.log(e_id());
            if (ob.resource
                .id >= 20 && ob.resource
                .id < 30) {
                var classname = 'bg-light-green-6';
            }
            if (ob.resource
                .id >= 30 && ob.resource
                .id < 40) {
                var classname = 'bg-blue-6';
            }
            if (ob.resource
                .id >= 40 && ob.resource
                .id < 50) {
                var classname = 'bg-cyan-6';
            }
            if (ob.resource
                .id >= 50 && ob.resource
                .id < 60) {
                var classname = 'bg-amber-6';
            }

            let event = {
                id: e_id(),
                title: ob.resource.title,
                start: ob
                    .startStr,
                end: ob
                    .endStr,
                resourceId: ob.resource
                    .id,
                classNames: classname

            }

            let reqdata = {
                pid: this.pid,
                plan_id: event.id,
                title: event.title,
                start: event.start,
                end: event.end,
                resourceId: event.resourceId,
                color: event.classNames
            }
            addPlanEvent(reqdata).then(res => {
                //console.log(res);
                if (res.data.code == 1) {
                    this.handleLoadPlanList()
                }
            })
            // var newevent = calendarApi.getEventById(event.id);
            // //console.log(event,newevent);
            // newevent.setResources(ob.resource
            //         .id);

        },
        handleClick(ob) {

            if (this.clickable) {
                var vm = this;
                this.$q.dialog({
                    dark: true,
                    title: '提示',
                    message: '是否删除该条计划？',
                    cancel: true,
                }).onOk(() => {
                    deletePlanEvent({
                        pid: this.pid,
                        plan_id: ob.event.id
                    }).then(res => {
                        ob.event.remove();
                        vm.handleLoadPlanList()
                    })
                }).onCancel(() => {
                    // //console.log('Cancel')
                }).onDismiss(() => {
                    // //console.log('I am triggered on both OK and Cancel')
                })
            }

        },
        handleResize(ob) {
            //console.log('resize', ob);

            var resources = ob.event.getResources();
            var resource_id = resources.map(function (resource) {
                return resource.id
            })[0];
            if (resource_id >= 20 && resource_id < 30) {
                var classname = 'bg-light-green-6';
            }
            if (resource_id >= 30 && resource_id < 40) {
                var classname = 'bg-blue-6';
            }
            if (resource_id >= 40 && resource_id < 50) {
                var classname = 'bg-cyan-6';
            }
            if (resource_id >= 50 && resource_id < 60) {
                var classname = 'bg-amber-6';
            }
            let reqdata = {
                pid: this.pid,
                plan_id: ob.event.id,
                title: ob.event.title,
                start: ob.event.startStr,
                end: ob.event.endStr,
                resourceId: parseInt(resource_id),
                color: classname
            }

            updatePlanEvent(reqdata).then(res => {
                //console.log(res);
                if (res.data.code == 1) {

                    this.handleLoadPlanList()
                }
            })
        },
        handleEventDrop(ob) {
            //console.log(ob, 'drop');
            let resource_id = ob.newResource.id;
            if (resource_id >= 20 && resource_id < 30) {
                var classname = 'bg-light-green-6';
            }
            if (resource_id >= 30 && resource_id < 40) {
                var classname = 'bg-blue-6';
            }
            if (resource_id >= 40 && resource_id < 50) {
                var classname = 'bg-cyan-6';
            }
            if (resource_id >= 50 && resource_id < 60) {
                var classname = 'bg-amber-6';
            }
            let reqdata = {
                pid: this.pid,
                plan_id: ob.event.id,
                title: ob.newResource.title,
                start: ob.event.startStr,
                end: ob.event.endStr,
                resourceId: ob.newResource.id,
                color: classname
            }
            //console.log(reqdata);
            updatePlanEvent(reqdata).then(res => {
                //console.log(res);
                if (res.data.code == 1) {
                    this.handleLoadPlanList()
                }
            })
        },
        handleLoadPlanList() {
            loadPlanList({
                pid: this.pid
            }).then(res => {
              this.isLoading=false;
                if (res.data.code == 1) {
                    let data = res.data.data;
                    if (data.length > 0) {
                        let calendarApi = this.$refs.fullCalendar.getApi();
                        data.forEach(item => {
                            let event = {
                                id: item.plan_id,
                                title: item.title,
                                start: item.start,
                                end: item.end,
                                resourceId: item.resourceId,
                                classNames: item.color

                            }
                            let e = calendarApi.getEventById(item.plan_id);
                            //console.log(e);
                            if (e == null) {
                                calendarApi.addEvent(event)
                            } else {
                                e.remove()
                                calendarApi.addEvent(event)
                            }

                        })
                    }
                }
            })
        },
    }
}
</script>
